<template>
  <div class="promotions-page bg-white dark:bg-gray-900 min-h-screen">
    <!-- 页面标题 -->
    <div class="page-header p-6 border-b dark:border-gray-700">
      <div class="flex justify-between items-center">
        <div class="header-left">
          <h2 class="text-2xl font-bold dark:text-white">促销活动</h2>
        </div>
        <div class="header-right">
          <a-button type="primary" @click="handleCreate">
            <template #icon><icon-plus /></template>
            创建活动
          </a-button>
        </div>
      </div>
    </div>

    <!-- 活动统计卡片 -->
    <div class="overview-section p-6">
      <a-row :gutter="16">
        <a-col :span="6">
          <a-card class="stat-card dark:bg-gray-800" :bordered="false">
            <div class="card-content">
              <div class="card-title dark:text-gray-300">进行中活动</div>
              <div class="card-value text-blue-600 dark:text-blue-400">
                {{ stats.active }}
              </div>
              <div class="card-desc dark:text-gray-400">当前生效的活动数量</div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stat-card dark:bg-gray-800" :bordered="false">
            <div class="card-content">
              <div class="card-title dark:text-gray-300">待开始活动</div>
              <div class="card-value text-green-600 dark:text-green-400">
                {{ stats.upcoming }}
              </div>
              <div class="card-desc dark:text-gray-400">即将开始的活动数量</div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stat-card dark:bg-gray-800" :bordered="false">
            <div class="card-content">
              <div class="card-title dark:text-gray-300">已结束活动</div>
              <div class="card-value text-gray-600 dark:text-gray-400">
                {{ stats.ended }}
              </div>
              <div class="card-desc dark:text-gray-400">历史活动总数</div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stat-card dark:bg-gray-800" :bordered="false">
            <div class="card-content">
              <div class="card-title dark:text-gray-300">本月订单数</div>
              <div class="card-value text-orange-600 dark:text-orange-400">
                {{ stats.monthlyOrders }}
              </div>
              <div class="card-desc dark:text-gray-400">通过活动产生的订单</div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 搜索和筛选 -->
    <div class="search-section px-6">
      <a-card :bordered="false" class="dark:bg-gray-800">
        <a-form :model="searchForm" layout="inline">
          <a-form-item
            field="keyword"
            label="关键词搜索"
            class="dark:text-gray-300"
          >
            <a-input
              v-model="searchForm.keyword"
              placeholder="活动名称/房型"
              allow-clear
              class="dark:bg-gray-700 dark:text-gray-300"
            />
          </a-form-item>
          <a-form-item
            field="status"
            label="活动状态"
            class="dark:text-gray-300"
          >
            <a-select
              v-model="searchForm.status"
              placeholder="请选择状态"
              allow-clear
              style="width: 160px"
              class="dark:bg-gray-700 dark:text-gray-300"
            >
              <a-option value="active">进行中</a-option>
              <a-option value="upcoming">待开始</a-option>
              <a-option value="ended">已结束</a-option>
              <a-option value="draft">草稿</a-option>
            </a-select>
          </a-form-item>
          <a-form-item field="type" label="活动类型" class="dark:text-gray-300">
            <a-select
              v-model="searchForm.type"
              placeholder="请选择类型"
              allow-clear
              style="width: 160px"
              class="dark:bg-gray-700 dark:text-gray-300"
            >
              <a-option value="discount">折扣促销</a-option>
              <a-option value="flash">限时特惠</a-option>
              <a-option value="package">套餐优惠</a-option>
              <a-option value="points">积分活动</a-option>
              <a-option value="gift">赠品活动</a-option>
            </a-select>
          </a-form-item>
          <a-form-item
            field="dateRange"
            label="活动时间"
            class="dark:text-gray-300"
          >
            <a-range-picker
              v-model="searchForm.dateRange"
              style="width: 260px"
              class="dark:bg-gray-700 dark:text-gray-300"
            />
          </a-form-item>
          <a-form-item>
            <a-space>
              <a-button type="primary" @click="handleSearch">
                <template #icon><icon-search /></template>
                搜索
              </a-button>
              <a-button
                @click="handleReset"
                class="dark:text-gray-300 dark:border-gray-600"
              >
                <template #icon><icon-refresh /></template>
                重置
              </a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </a-card>
    </div>

    <!-- 活动列表 -->
    <div class="list-section p-6">
      <a-table
        :data="promotionList"
        :columns="columns"
        :pagination="pagination"
        class="dark:bg-gray-800"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"
      >
        <!-- 活动信息 -->
        <template #info="{ record }">
          <div class="promotion-info">
            <div class="flex items-center">
              <a-image
                :src="record.image"
                :width="80"
                :height="60"
                fit="cover"
                class="rounded"
              />
              <div class="ml-3">
                <div class="font-medium dark:text-white">{{ record.name }}</div>
                <div class="text-gray-500 dark:text-gray-400 text-sm">
                  {{ getPromotionTypeText(record.type) }}
                </div>
                <a-tag size="small" :color="getStatusColor(record.status)">
                  {{ getStatusText(record.status) }}
                </a-tag>
              </div>
            </div>
          </div>
        </template>

        <!-- 活动规则 -->
        <template #rules="{ record }">
          <div class="promotion-rules">
            <div v-if="record.type === 'discount'">
              <div class="text-lg font-medium dark:text-white">
                {{ record.discount }}折
              </div>
              <div class="text-gray-500 dark:text-gray-400 text-sm">
                {{ record.roomType }}
              </div>
            </div>
            <div v-else-if="record.type === 'flash'">
              <div class="text-lg font-medium dark:text-white">
                ¥{{ record.specialPrice }}
              </div>
              <div class="text-gray-500 dark:text-gray-400 text-sm">
                原价：¥{{ record.originalPrice }}
              </div>
            </div>
            <div v-else-if="record.type === 'package'">
              <div class="text-lg font-medium dark:text-white">
                套餐价：¥{{ record.packagePrice }}
              </div>
              <div class="text-gray-500 dark:text-gray-400 text-sm">
                {{ record.packageDesc }}
              </div>
            </div>
            <div v-else-if="record.type === 'points'">
              <div class="text-lg font-medium dark:text-white">
                {{ record.points }}倍积分
              </div>
              <div class="text-gray-500 dark:text-gray-400 text-sm">
                {{ record.pointsDesc }}
              </div>
            </div>
            <div v-else-if="record.type === 'gift'">
              <div class="text-lg font-medium dark:text-white">
                {{ record.giftName }}
              </div>
              <div class="text-gray-500 dark:text-gray-400 text-sm">
                {{ record.giftDesc }}
              </div>
            </div>
          </div>
        </template>

        <!-- 活动时间 -->
        <template #time="{ record }">
          <div class="promotion-time">
            <div class="dark:text-white">{{ record.startTime }}</div>
            <div class="text-gray-500 dark:text-gray-400">至</div>
            <div class="dark:text-white">{{ record.endTime }}</div>
          </div>
        </template>

        <!-- 活动效果 -->
        <template #effect="{ record }">
          <div class="promotion-effect">
            <div class="text-lg font-medium dark:text-white">
              {{ record.orderCount }}单
            </div>
            <div class="text-gray-500 dark:text-gray-400 text-sm">
              转化率：{{ record.conversionRate }}%
            </div>
            <a-progress
              :percent="record.conversionRate"
              :stroke-width="4"
              size="small"
              class="dark:text-blue-400"
            />
          </div>
        </template>

        <!-- 操作 -->
        <template #operations="{ record }">
          <a-space>
            <a-button
              type="text"
              size="small"
              @click="handleEdit(record)"
              class="dark:text-blue-400"
            >
              编辑
            </a-button>
            <a-button
              v-if="record.status === 'active'"
              type="text"
              status="danger"
              size="small"
              @click="handleEnd(record)"
              class="dark:text-red-400"
            >
              结束
            </a-button>
            <a-button
              v-if="record.status === 'draft'"
              type="text"
              status="success"
              size="small"
              @click="handlePublish(record)"
              class="dark:text-green-400"
            >
              发布
            </a-button>
            <a-dropdown>
              <a-button type="text" size="small" class="dark:text-gray-300">
                更多
                <icon-down />
              </a-button>
              <template #content>
                <a-doption
                  @click="handleCopy(record)"
                  class="dark:text-gray-300"
                >
                  <template #icon><icon-copy /></template>
                  复制
                </a-doption>
                <a-doption
                  @click="handleView(record)"
                  class="dark:text-gray-300"
                >
                  <template #icon><icon-eye /></template>
                  查看数据
                </a-doption>
                <a-doption
                  @click="handleDelete(record)"
                  class="dark:text-gray-300"
                >
                  <template #icon><icon-delete /></template>
                  删除
                </a-doption>
              </template>
            </a-dropdown>
          </a-space>
        </template>
      </a-table>
    </div>

    <!-- 创建/编辑活动弹窗 -->
    <a-modal
      v-model:visible="showFormModal"
      :title="formType === 'create' ? '创建活动' : '编辑活动'"
      @cancel="cancelForm"
      @before-ok="handleFormSubmit"
      width="800px"
    >
      <a-form ref="formRef" :model="formData" layout="vertical">
        <a-form-item field="name" label="活动名称" required>
          <a-input
            v-model="formData.name"
            placeholder="请输入活动名称"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="type" label="活动类型" required>
          <a-select v-model="formData.type" placeholder="请选择活动类型">
            <a-option value="discount">折扣促销</a-option>
            <a-option value="flash">限时特惠</a-option>
            <a-option value="package">套餐优惠</a-option>
            <a-option value="points">积分活动</a-option>
            <a-option value="gift">赠品活动</a-option>
          </a-select>
        </a-form-item>

        <!-- 活动规则表单（根据类型显示不同字段） -->
        <template v-if="formData.type === 'discount'">
          <a-form-item field="roomType" label="适用房型" required>
            <a-select
              v-model="formData.roomType"
              placeholder="请选择房型"
              multiple
            >
              <a-option value="standard">标准房</a-option>
              <a-option value="deluxe">豪华房</a-option>
              <a-option value="suite">套房</a-option>
            </a-select>
          </a-form-item>
          <a-form-item field="discount" label="折扣力度" required>
            <a-input-number
              v-model="formData.discount"
              :min="1"
              :max="9.9"
              :precision="1"
              :step="0.1"
              style="width: 200px"
            />
            <span class="ml-2">折</span>
          </a-form-item>
        </template>

        <template v-if="formData.type === 'flash'">
          <a-form-item field="roomType" label="特惠房型" required>
            <a-select v-model="formData.roomType" placeholder="请选择房型">
              <a-option value="standard">标准房</a-option>
              <a-option value="deluxe">豪华房</a-option>
              <a-option value="suite">套房</a-option>
            </a-select>
          </a-form-item>
          <a-form-item field="specialPrice" label="特惠价格" required>
            <a-input-number
              v-model="formData.specialPrice"
              :min="0"
              :precision="2"
              style="width: 200px"
            />
            <span class="ml-2">元</span>
          </a-form-item>
          <a-form-item field="quota" label="每日限量" required>
            <a-input-number
              v-model="formData.quota"
              :min="1"
              style="width: 200px"
            />
            <span class="ml-2">间</span>
          </a-form-item>
        </template>

        <template v-if="formData.type === 'package'">
          <a-form-item field="packageName" label="套餐名称" required>
            <a-input
              v-model="formData.packageName"
              placeholder="请输入套餐名称"
            />
          </a-form-item>
          <a-form-item field="packageItems" label="套餐内容" required>
            <a-space direction="vertical" style="width: 100%">
              <a-checkbox-group v-model="formData.packageItems">
                <a-checkbox value="breakfast">双早</a-checkbox>
                <a-checkbox value="dinner">晚餐</a-checkbox>
                <a-checkbox value="spa">SPA</a-checkbox>
                <a-checkbox value="pickup">接送机</a-checkbox>
              </a-checkbox-group>
            </a-space>
          </a-form-item>
          <a-form-item field="packagePrice" label="套餐价格" required>
            <a-input-number
              v-model="formData.packagePrice"
              :min="0"
              :precision="2"
              style="width: 200px"
            />
            <span class="ml-2">元</span>
          </a-form-item>
        </template>

        <template v-if="formData.type === 'points'">
          <a-form-item field="pointsMultiple" label="积分倍数" required>
            <a-input-number
              v-model="formData.pointsMultiple"
              :min="1"
              :max="10"
              style="width: 200px"
            />
            <span class="ml-2">倍</span>
          </a-form-item>
          <a-form-item field="pointsDesc" label="活动说明" required>
            <a-textarea
              v-model="formData.pointsDesc"
              placeholder="请输入活动说明"
            />
          </a-form-item>
        </template>

        <template v-if="formData.type === 'gift'">
          <a-form-item field="giftName" label="赠品名称" required>
            <a-input v-model="formData.giftName" placeholder="请输入赠品名称" />
          </a-form-item>
          <a-form-item field="giftDesc" label="赠品说明" required>
            <a-textarea
              v-model="formData.giftDesc"
              placeholder="请输入赠品说明"
            />
          </a-form-item>
          <a-form-item field="giftQuota" label="赠品数量" required>
            <a-input-number
              v-model="formData.giftQuota"
              :min="1"
              style="width: 200px"
            />
            <span class="ml-2">份</span>
          </a-form-item>
        </template>

        <a-form-item field="dateRange" label="活动时间" required>
          <a-range-picker
            v-model="formData.dateRange"
            show-time
            style="width: 100%"
          />
        </a-form-item>

        <a-form-item field="description" label="活动说明">
          <a-textarea
            v-model="formData.description"
            placeholder="请输入活动说明"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-item>

        <a-form-item field="image" label="活动图片">
          <a-upload
            list-type="picture-card"
            :custom-request="handleUpload"
            :limit="1"
          >
            <template #upload-button>
              <div>
                <icon-plus />
                <div>上传图片</div>
              </div>
            </template>
          </a-upload>
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 活动数据弹窗 -->
    <a-modal
      v-model:visible="showStatsModal"
      title="活动数据"
      @cancel="closeStatsModal"
      width="800px"
    >
      <div v-if="selectedPromotion" class="stats-content">
        <!-- 数据概览 -->
        <div class="grid grid-cols-4 gap-4 mb-6">
          <div class="stat-item bg-blue-50 rounded-lg p-4">
            <div class="text-sm text-gray-500">浏览量</div>
            <div class="text-xl font-medium text-blue-600">
              {{ selectedPromotion.stats.views }}
            </div>
          </div>
          <div class="stat-item bg-green-50 rounded-lg p-4">
            <div class="text-sm text-gray-500">订单数</div>
            <div class="text-xl font-medium text-green-600">
              {{ selectedPromotion.stats.orders }}
            </div>
          </div>
          <div class="stat-item bg-yellow-50 rounded-lg p-4">
            <div class="text-sm text-gray-500">转化率</div>
            <div class="text-xl font-medium text-yellow-600">
              {{ selectedPromotion.stats.conversion }}%
            </div>
          </div>
          <div class="stat-item bg-purple-50 rounded-lg p-4">
            <div class="text-sm text-gray-500">销售额</div>
            <div class="text-xl font-medium text-purple-600">
              ¥{{ selectedPromotion.stats.revenue }}
            </div>
          </div>
        </div>

        <!-- 趋势图表 -->
        <div class="mb-6">
          <h3 class="text-lg font-medium mb-4">数据趋势</h3>
          <!-- 这里可以添加图表组件 -->
        </div>

        <!-- 订单列表 -->
        <div>
          <h3 class="text-lg font-medium mb-4">订单记录</h3>
          <a-table
            :data="selectedPromotion.orders"
            :pagination="{ pageSize: 5 }"
          >
            <template #columns>
              <a-table-column title="订单号" data-index="orderNo" />
              <a-table-column title="房型" data-index="roomType" />
              <a-table-column title="订单金额" data-index="amount">
                <template #cell="{ record }"> ¥{{ record.amount }} </template>
              </a-table-column>
              <a-table-column title="下单时间" data-index="createTime" />
            </template>
          </a-table>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { Message } from "@arco-design/web-vue";
import {
  IconPlus,
  IconSearch,
  IconRefresh,
  IconDown,
  IconCopy,
  IconEye,
  IconDelete,
} from "@arco-design/web-vue/es/icon";

// 活动统计数据
const stats = reactive({
  active: 5,
  upcoming: 3,
  ended: 12,
  monthlyOrders: 156,
});

// 搜索表单
const searchForm = reactive({
  keyword: "",
  status: "",
  type: "",
  dateRange: [],
});

// 表格列配置
const columns = [
  {
    title: "活动信息",
    slotName: "info",
    width: 300,
  },
  {
    title: "活动规则",
    slotName: "rules",
    width: 200,
  },
  {
    title: "活动时间",
    slotName: "time",
    width: 200,
  },
  {
    title: "活动效果",
    slotName: "effect",
    width: 200,
  },
  {
    title: "操作",
    slotName: "operations",
    width: 200,
    fixed: "right",
  },
];

// 分页配置
const pagination = reactive({
  total: 100,
  current: 1,
  pageSize: 10,
  showTotal: true,
  showJumper: true,
  showPageSize: true,
});

// 活动列表数据
const promotionList = ref([
  {
    id: 1,
    name: "春季特惠房",
    type: "discount",
    status: "active",
    image: "/images/promotions/spring.jpg",
    discount: 8.5,
    roomType: "豪华大床房",
    startTime: "2024-03-01 00:00:00",
    endTime: "2024-03-31 23:59:59",
    orderCount: 68,
    conversionRate: 15.6,
  },
]);

// 表单相关
const showFormModal = ref(false);
const formType = ref("create");
const formRef = ref(null);
const formData = reactive({
  name: "",
  type: "",
  roomType: "",
  discount: 0,
  dateRange: [],
  description: "",
});

// 数据统计相关
const showStatsModal = ref(false);
const selectedPromotion = ref(null);

// 获取活动类型文本
const getPromotionTypeText = (type) => {
  const types = {
    discount: "折扣促销",
    flash: "限时特惠",
    package: "套餐优惠",
    points: "积分活动",
    gift: "赠品活动",
  };
  return types[type] || type;
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    active: "进行中",
    upcoming: "待开始",
    ended: "已结束",
    draft: "草稿",
  };
  return statusMap[status] || status;
};

// 获取状态颜色
const getStatusColor = (status) => {
  const colorMap = {
    active: "green",
    upcoming: "blue",
    ended: "gray",
    draft: "orange",
  };
  return colorMap[status] || "default";
};

// 搜索
const handleSearch = () => {
  // 实现搜索逻辑
};

// 重置搜索
const handleReset = () => {
  Object.keys(searchForm).forEach((key) => {
    searchForm[key] = "";
  });
  handleSearch();
};

// 创建活动
const handleCreate = () => {
  formType.value = "create";
  Object.keys(formData).forEach((key) => {
    formData[key] = "";
  });
  showFormModal.value = true;
};

// 编辑活动
const handleEdit = (promotion) => {
  formType.value = "edit";
  Object.keys(formData).forEach((key) => {
    formData[key] = promotion[key];
  });
  showFormModal.value = true;
};

// 取消表单
const cancelForm = () => {
  showFormModal.value = false;
};

// 提交表单
const handleFormSubmit = async () => {
  try {
    await formRef.value.validate();
    // 调用API保存数据
    await new Promise((resolve) => setTimeout(resolve, 1000));
    Message.success(formType.value === "create" ? "创建成功" : "修改成功");
    showFormModal.value = false;
    handleSearch();
    return true;
  } catch (error) {
    return false;
  }
};

// 结束活动
const handleEnd = async (promotion) => {
  try {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    Message.success("活动已结束");
    handleSearch();
  } catch (error) {
    Message.error("操作失败");
  }
};

// 发布活动
const handlePublish = async (promotion) => {
  try {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    Message.success("活动已发布");
    handleSearch();
  } catch (error) {
    Message.error("发布失败");
  }
};

// 复制活动
const handleCopy = (promotion) => {
  formType.value = "create";
  Object.keys(formData).forEach((key) => {
    formData[key] = promotion[key];
  });
  formData.name = `${formData.name} - 副本`;
  showFormModal.value = true;
};

// 查看数据
const handleView = (promotion) => {
  selectedPromotion.value = {
    ...promotion,
    stats: {
      views: 2345,
      orders: 68,
      conversion: 15.6,
      revenue: 46800,
    },
    orders: [
      {
        orderNo: "H202403200001",
        roomType: "豪华大床房",
        amount: 688,
        createTime: "2024-03-20 12:34:56",
      },
    ],
  };
  showStatsModal.value = true;
};

// 关闭数据统计
const closeStatsModal = () => {
  showStatsModal.value = false;
  selectedPromotion.value = null;
};

// 删除活动
const handleDelete = async (promotion) => {
  try {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    Message.success("删除成功");
    handleSearch();
  } catch (error) {
    Message.error("删除失败");
  }
};

// 上传图片
const handleUpload = (options) => {
  // 实现图片上传逻辑
};

// 分页相关方法
const onPageChange = (current) => {
  pagination.current = current;
  handleSearch();
};

const onPageSizeChange = (pageSize) => {
  pagination.pageSize = pageSize;
  pagination.current = 1;
  handleSearch();
};
</script>

<style lang="less" scoped>
.promotions-page {
  :deep(.arco-table-th) {
    background-color: var(--color-bg-2);
    &.dark {
      background-color: #1f2937;
      color: #e5e7eb;
    }
  }

  :deep(.arco-table-td) {
    &.dark {
      background-color: #1f2937;
      color: #e5e7eb;
    }
  }

  :deep(.arco-input-wrapper),
  :deep(.arco-select-view),
  :deep(.arco-picker) {
    .dark & {
      background-color: #374151;
      border-color: #4b5563;

      &:hover,
      &:focus {
        border-color: #60a5fa;
      }
    }
  }

  :deep(.arco-dropdown-menu) {
    .dark & {
      background-color: #1f2937;
      border-color: #4b5563;
    }
  }

  .overview-section {
    margin-bottom: 24px;

    .stat-card {
      position: relative;
      height: 140px;
      padding: 20px;
      overflow: hidden;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

      .dark & {
        background: rgba(31, 41, 55, 0.6);
        border-color: rgba(75, 85, 99, 0.4);
      }

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.1),
          rgba(255, 255, 255, 0.05)
        );
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

        &::before {
          opacity: 1;
        }

        .card-value {
          transform: scale(1.05);
        }
      }

      .card-content {
        position: relative;
        z-index: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
      }

      .card-title {
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 12px;
        color: var(--color-text-2);
        display: flex;
        align-items: center;
        gap: 8px;

        .dark & {
          color: rgba(229, 231, 235, 0.8);
        }
      }

      .card-value {
        font-size: 28px;
        font-weight: 600;
        margin-bottom: 12px;
        transition: transform 0.3s ease;
        background: linear-gradient(45deg, #2196f3, #00bcd4);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        .dark & {
          background: linear-gradient(45deg, #60a5fa, #34d399);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .card-desc {
        margin-top: auto;
        font-size: 13px;
        color: var(--color-text-3);

        .dark & {
          color: rgba(229, 231, 235, 0.6);
        }
      }
    }
  }

  .promotions-list {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);

    .dark & {
      background: rgba(31, 41, 55, 0.6);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    }

    .list-header {
      padding: 20px 24px;
      border-bottom: 1px solid var(--color-neutral-3);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(10px);

      .dark & {
        border-color: #374151;
        background: rgba(31, 41, 55, 0.5);
      }

      .header-title {
        font-size: 18px;
        font-weight: 600;
        color: var(--color-text-1);
        display: flex;
        align-items: center;
        gap: 8px;

        .arco-icon {
          font-size: 20px;
          color: var(--color-primary-light-4);
        }
      }

      .header-actions {
        display: flex;
        gap: 12px;

        .arco-btn {
          transition: all 0.3s ease;

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          }
        }
      }
    }

    .search-form {
      margin: 24px;
      padding: 20px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

      .dark & {
        background: rgba(31, 41, 55, 0.5);
      }

      .form-row {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin-bottom: 16px;

        &:last-child {
          margin-bottom: 0;
        }

        .arco-form-item {
          margin-bottom: 0;
          min-width: 200px;
          flex: 1;
        }
      }
    }

    .promotion-item {
      padding: 20px;
      border-bottom: 1px solid var(--color-neutral-3);
      transition: all 0.3s ease;

      &:hover {
        background-color: rgba(255, 255, 255, 0.8);
        transform: translateX(4px);

        .dark & {
          background-color: rgba(55, 65, 81, 0.8);
        }
      }

      .dark & {
        border-color: #374151;
      }

      .item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;

        .promotion-name {
          font-size: 16px;
          font-weight: 600;
          color: var(--color-text-1);
          display: flex;
          align-items: center;
          gap: 8px;

          .arco-icon {
            color: var(--color-primary-light-4);
          }
        }

        .promotion-status {
          padding: 6px 16px;
          border-radius: 20px;
          font-size: 13px;
          font-weight: 500;
          display: flex;
          align-items: center;
          gap: 4px;

          .arco-icon {
            font-size: 14px;
          }

          &.active {
            background-color: rgba(16, 185, 129, 0.1);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.2);
          }

          &.upcoming {
            background-color: rgba(59, 130, 246, 0.1);
            color: #3b82f6;
            border: 1px solid rgba(59, 130, 246, 0.2);
          }

          &.ended {
            background-color: rgba(156, 163, 175, 0.1);
            color: #9ca3af;
            border: 1px solid rgba(156, 163, 175, 0.2);
          }
        }
      }

      .item-content {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 24px;
        margin-bottom: 20px;
        background: rgba(255, 255, 255, 0.5);
        padding: 16px;
        border-radius: 8px;

        .dark & {
          background: rgba(31, 41, 55, 0.3);
        }

        .content-block {
          .block-label {
            font-size: 13px;
            color: var(--color-text-3);
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 4px;

            .arco-icon {
              font-size: 14px;
              opacity: 0.7;
            }
          }

          .block-value {
            font-size: 14px;
            color: var(--color-text-1);
            font-weight: 500;
          }
        }
      }

      .item-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 16px;

        .footer-info {
          font-size: 13px;
          color: var(--color-text-3);
          display: flex;
          align-items: center;
          gap: 16px;

          .info-item {
            display: flex;
            align-items: center;
            gap: 4px;

            .arco-icon {
              font-size: 14px;
              opacity: 0.7;
            }
          }
        }

        .footer-actions {
          display: flex;
          gap: 12px;

          .arco-btn {
            padding: 6px 16px;
            font-size: 13px;
            border-radius: 6px;
            transition: all 0.3s ease;

            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }

            .arco-icon {
              font-size: 14px;
            }
          }
        }
      }
    }
  }

  .promotion-modal {
    .modal-form {
      .form-section {
        margin-bottom: 24px;
        background: rgba(255, 255, 255, 0.5);
        padding: 20px;
        border-radius: 8px;

        .dark & {
          background: rgba(31, 41, 55, 0.3);
        }

        .section-title {
          font-size: 16px;
          font-weight: 600;
          color: var(--color-text-1);
          margin-bottom: 20px;
          padding-bottom: 12px;
          border-bottom: 1px solid var(--color-neutral-3);
          display: flex;
          align-items: center;
          gap: 8px;

          .arco-icon {
            font-size: 18px;
            color: var(--color-primary-light-4);
          }
        }
      }

      .rules-list {
        .rule-item {
          padding: 16px;
          background: rgba(255, 255, 255, 0.5);
          border-radius: 8px;
          margin-bottom: 16px;
          border: 1px solid var(--color-neutral-3);
          transition: all 0.3s ease;

          .dark & {
            background: rgba(31, 41, 55, 0.3);
            border-color: #374151;
          }

          &:hover {
            transform: translateX(4px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
          }

          .rule-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px dashed var(--color-neutral-3);

            .rule-title {
              font-weight: 500;
              color: var(--color-text-1);
              display: flex;
              align-items: center;
              gap: 8px;

              .arco-icon {
                color: var(--color-primary-light-4);
              }
            }
          }

          .rule-content {
            font-size: 14px;
            color: var(--color-text-2);
            line-height: 1.6;
          }
        }
      }
    }
  }
}
</style>
